<template>
  <br />
  <div>
    <z-breadcrumb :routes="routes">
      <template #itemRender="{ route, paths }">
        <span v-if="routes.indexOf(route) === routes.length - 1">
          {{ route.breadcrumbName }}
        </span>
        <router-link v-else :to="`${basePath}/${paths.join('/')}`">
          {{ route.breadcrumbName }}
        </router-link>
      </template>
    </z-breadcrumb>
    <br />
    {{ $route.path }}
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'BreadcrumbDemo3',
  setup() {
    const routes = ref([
      {
        path: 'index',
        breadcrumbName: 'home'
      },
      {
        path: 'first',
        breadcrumbName: 'first',
        children: [
          {
            path: '/general',
            breadcrumbName: 'General'
          },
          {
            path: '/layout',
            breadcrumbName: 'Layout'
          },
          {
            path: '/navigation',
            breadcrumbName: 'Navigation'
          }
        ]
      },
      {
        path: 'second',
        breadcrumbName: 'second'
      }
    ])
    return {
      basePath: '/components/breadcrumb',
      routes
    }
  }
})
</script>
